import React, { Component } from 'react'
import { connect } from 'react-redux';
import { deleteEducation } from '../../actions/profileActions';

// 教育组件
class Education extends Component {
  // 删除
  onDeleteClick = (id) => {
    this.props.deleteEducation(id)
  }
  render () {
    let education = this.props.education.map(exp => (
      <tr key={exp._id}>
        <td>{exp.school}</td>
        <td>{exp.degree}</td>
        <td>
          {exp.from} 至 {exp.to === '' ? '至今' : exp.to}
        </td>
        <td>
          <button
            onClick={() => this.onDeleteClick(exp._id)}
            className="btn btn-danger"
          >
            删除
            </button>
        </td>
      </tr>
    ))



    return (
      <div>
        {
          this.props.education.length > 0 ?
            <div>

              < h4 className="mb-4">教育经历</h4>
              <table className="table">
                <thead>
                  <tr>
                    <th>学校</th>
                    <th>学历</th>
                    <th>年份</th>
                    <th>操作</th>
                  </tr>
                  {education}
                </thead>
              </table>
            </div >
            : null
        }
      </div >
    )
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    // 删除当前教育
    deleteEducation: (id) => {
      dispatch(deleteEducation(id))
    }
  }

}
export default connect(null, mapDispatchToProps)(Education)